<template>
  <div class="main">
    <AdminLayouts>
      <template #header>
        <!-- <div class="header"></div> -->
        <Breadcrumb />
        <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #aside>
        <div class="logo">
          <img
            src="https://tucdn.wpon.cn/2023/03/01/61129fa7832b5.png"
            alt=""
          />
          Admin
        </div>
        <Menu
          :menuList="$auth.showMenuListGet"
          :defaultActive="active"
          activeTextColor="#ffd04b"
          backgroundColor="#001428"
          textColor="#bbb"
        />
      </template>
      <template #main>
        <router-view></router-view>
      </template>
    </AdminLayouts>
  </div>
</template>

<script setup lang="ts">
import AdminLayouts from "@/layouts/AdminLayouts.vue";
import Menu from "./component/Menu/index.vue";
import Breadcrumb from "./component/Breadcrumb/index.vue";

import { useAuthStore } from "@/stores/";
const $route = useRoute();
const $auth = useAuthStore();
// setTimeout(() => {
//   console.log(34, $auth.breadcrumbListGet);
// }, 2000);
const active = ref($route.path || "/home");
watch(
  () => $route.path,
  (newVal) => {
    active.value = newVal;
  }
);
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  overflow: hidden;

  // .header{
  //   background: red;

  // }

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: #fff;
    font-weight: bold;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
</style>
